<script setup>
import { ref, defineOptions } from 'vue'
import { CityMsg } from '@/api/getAxios'


const susAdventure = ref([])
CityMsg().then((res) => {
    // console.log(res);
    susAdventure.value = res.data.data[1].list
})

</script>
<template>
    <div class="sus-adventure">
        <h1 class="recommend">
            <span>悬疑探险</span>
        </h1>
        <ul>
            <li v-for="item in susAdventure" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <img :src="item.cover" alt="">
                <p>{{ item.storyName }}</p>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.sus-adventure {
    height: 80vw;
    background-color: #fff;
    margin-bottom: 20px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 27vw;
            height: 37vw;
            margin: 30px 10px;
            border-radius: 10px;
            box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);


            img {
                border-radius: 10px;
                width: 100%;
                height: 100%;
            }

            p {
                display: -webkit-box;
                text-align: center;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        }
    }
}
</style>